<template>
    <div class="hello" style="height: 100vh;background:#fff;">
      <app-head :title="title"></app-head>

      <div >
        <p class="title">你还可以输入67524字
          <button class="btn">提交</button>
        </p>
        <div class="send_con">
          <p class="tit"><input type="text" placeholder="标题"></p>
          <p class="con">
            <textarea name="" id="" cols="30" rows="10" placeholder="正文"></textarea>
          </p>
        </div>
        <div>
          <p class="art">草稿已于2018-06-08 12:02:30 保存
            <button class="btn">保存草稿</button>
          </p>
        </div>
      </div>

    </div>
</template>

<script>
  import AppHead from '@/components/Head'
    export default {
        name: "SolicitPush3",
        created:function(){

        },
        components:{
          AppHead
        },
        data () {
          return {
            title: '征稿 | 活动标题'
          }
        },
      methods:{
          aler_show:function () {
            this.$layer.alert("粘贴的内容已清除文字格式及图片 请重新上传图片！",{
              shade:true,
              btn: '确定',
              shadeClose: true,//点击遮罩是否关闭
              time:2000
            });
          },
        
      }
    }
</script>

<style scoped lang="less">

  .content{

    padding-bottom: 30px;
    background: #fff;
  }
  .title{
    color: #777777;
    font-size: 13px;
    height: 52px;
    line-height: 52px;
    background: #f2f3f6;
    text-align: left;
    padding: 0 16px;
    position: relative;
    .btn{
      width:80px;
      height:33px;
      background:rgba(74,144,226,1);
      border-radius:8px;
      background: #4A90E2;
      color: #fff;position: absolute;
      right: 16px;
      border: none;
      top: 10px;
    }
  }
  .art{
    color: #777777;
    font-size: 12px;
    height: 52px;
    line-height: 52px;
    background: #fff url("../assets/images/icon3.png") no-repeat 5% center ;
    text-align: left;
    padding: 0 16px;
    position: relative;
    padding-left: 15%;
    .btn{
      width:80px;
      height:33px;

      border-radius:8px;
      background: #E24A4A;
      color: #fff;position: absolute;
      right: 16px;
      border: none;
      top: 10px;
    }
  }
.send_con{
  padding: 16px 24px;
  text-align: left;
  input,textarea{
    border: none;
    color: #ccc;font-size: 15px;
  }
  .tit{
      margin-bottom: 16px;
      border-bottom: 1px solid #eee;padding-bottom: 16px;
  }
  .con{
      textarea{
        outline: none;
        width: 100%;
      }
  }
}
</style>
<style lang="less">

  html{
    background: #fff!important;
    .vl-notify.vl-notify-alert h2.vl-notice-title{
      display: none!important;
    }
    .vl-notify .vl-notify-btns{
      padding: 0;
    }
    .vl-notify.vl-notify-main{
      box-shadow:none;
    }
    .vl-notify .vl-notify-content{
      font-size: 15px;
      color: #333333;
      text-align: center;line-height:26px;
    }
    .vl-notify-mask{
      background: rgba(0,0,0,.5);
    }
    .vl-notify-btns{
      width: 100%;
      height: 48px;
      line-height: 48px;
      border: 1px solid rgba(238,238,238,1);;
      .notify-btn-primary{
        height: 48px;
        background: #fff;
        text-align: center;color: #0076FF;
        border: none;
        width: 100%;
        margin: 0 auto;font-size:17px;
      }
    }

  }

</style>
